<template>
  <div class="article-card">
    <!-- 左侧图片区域 -->
    <div class="article-img">
      <img :src="getBackendImageUrl(img)" alt="文章封面" class="cover-image" />
    </div>
    
    <!-- 右侧信息区域 -->
    <div class="article-info">
      <div class="info-header">
        <!-- 文章标题 -->
        <h3 class="article-title">{{ title }}</h3>
        
        <!-- 发布时间与标签 -->
        <div class="article-meta">
          <span class="publish-time">发表于 {{ formatPublishTime }}</span>
          <div class="article-tags">
            <span 
              v-for="tag in tags" 
              :key="tag" 
              class="tag"
            >{{ tag }}</span>
          </div>
        </div>
      </div>
      
      <!-- 文章内容摘要 -->
      <p class="article-content">{{ content }}</p>
      
      <!-- 统计信息 -->
      <div class="article-stats">
        <span class="stat-item">
          <i class="icon-view"></i> {{ views }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { getBackendImageUrl } from '../libs/util.common.js';
// 组件属性定义
const props = defineProps({
  // 文章封面图
  img: {
    type: String,
    default: getBackendImageUrl('wrapper/karina2.png')
  },
  // 文章标题
  title: {
    type: String,
    required: true
  },
  // 文章内容摘要
  content: {
    type: String,
    default: '这篇文章是在第一篇普通部署教程的基础上，使用宝塔面板进行更便捷的博客部署方法'
  },

  // 发布时间 - 支持 Date 对象或 ISO 8601 字符串（如 2025-10-10T16:00:00.000Z）
  publishTime: {
    type: [Date, String],
    default: () => new Date()
  },
  // 浏览量
  views: {
    type: Number,
    default: 3564
  },
  // 标签列表
  tags: {
    type: Array,
    default: () => ['Linux', '宝塔面板']
  }
});

// 格式化发布时间
const formatPublishTime = computed(() => {
  // 处理 ISO 8601 格式或其他格式的时间字符串
  const date = props.publishTime instanceof Date ? props.publishTime : new Date(props.publishTime);
  
  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    return '未知时间';
  }
  
  const now = new Date();
  const diff = now - date;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  
  if (days === 0) {
    // 同一天内，显示具体时间
    const hours = Math.floor(diff / (1000 * 60 * 60));
    if (hours === 0) {
      const minutes = Math.floor(diff / (1000 * 60));
      return minutes <= 0 ? '刚刚' : `${minutes}分钟前`;
    }
    return `${hours}小时前`;
  } else if (days === 1) {
    return '昨天';
  } else if (days < 7) {
    return `${days}天前`;
  } else if (days < 30) {
    return `${Math.floor(days / 7)}周前`;
  } else if (days < 365) {
    return `${Math.floor(days / 30)}个月前`;
  } else {
    return date.toLocaleDateString('zh-CN');
  }
});
</script>

<style scoped>
.article-card {
  display: flex;
  width: 100%;
  height: 16rem; /* 固定高度 */
  margin-bottom: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
  max-width: 900px;
}

.article-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 左侧图片样式 */
.article-img {
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
  height: 100%; /* 确保图片区域占满高度 */
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .cover-image {
  transform: scale(1.05);
}

/* 右侧信息区域样式 */
.article-info {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  height: 100%; /* 确保信息区域占满高度 */
  box-sizing: border-box; /* 包含padding在内的高度计算 */
}

/* 标题区域 */
.info-header {
  margin-bottom: 0.5rem; /* 减少间距 */
}

.article-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #2c3e50;
  line-height: 1.3;
  transition: color 0.2s;
}

.article-title:hover {
  color: #3498db;
  cursor: pointer;
}

/* 元数据区域 */
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem; /* 减少间距 */
  font-size: 0.875rem;
  color: #7f8c8d;
  margin-bottom: 0.25rem; /* 减少底部间距 */
}

.article-tags {
  display: flex;
  gap: 0.5rem;
}

.tag {
  background-color: #f5f7fa;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #5d6970;
  transition: background-color 0.2s;
}

.tag:hover {
  background-color: #eaecef;
}

/* 内容摘要 */
.article-content {
  flex-grow: 1;
  margin: 0 0 1rem 0;
  line-height: 1.6;
  color: #555;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行显示 */
  -webkit-box-orient: vertical;
  word-break: break-word; /* 安全的单词断行 */
  overflow-wrap: break-word; /* 现代浏览器断行 */
  hyphens: auto; /* 可选的连字符 */
  max-height: 3.2em; /* 约2行文字的高度 */
}

/* 统计信息 */
.article-stats {
  display: flex;
  gap: 1rem; /* 减少间距 */
  font-size: 0.875rem;
  color: #7f8c8d;
  padding-top: 0.25rem; /* 减少顶部间距 */
  border-top: 1px solid #f1f1f1;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}


.icon-view::before {
  content: "👁️";
}

/* 响应式调整 */
@media (max-width: 768px) {
  .article-card {
    flex-direction: column;
    height: auto; /* 移动端自适应高度 */
    min-height: 280px; /* 适中的移动端最小高度 */
    margin-bottom: 1rem; /* 减少移动端卡片间距 */
  }
  
  .article-img {
    width: 100%;
    height: 140px; /* 适中的移动端图片高度 */
  }
  
  .article-info {
    padding: 0.875rem 1rem; /* 适中的移动端内边距 */
    height: auto; /* 自适应内容高度 */
    justify-content: flex-start; /* 顶部对齐，避免底部截断 */
  }
  
  .article-title {
    font-size: 1.1rem; /* 适中的标题字号 */
    margin-bottom: 0.4rem; /* 适中的标题间距 */
    line-height: 1.3; /* 确保标题不会截断 */
  }
  
  .article-content {
    -webkit-line-clamp: 3; /* 适中的显示行数 */
    max-height: none; /* 移除固定高度限制 */
    margin-bottom: 0.5rem; /* 适中的底部间距 */
    line-height: 1.45; /* 适中的行高 */
    font-size: 0.9rem; /* 适中的字号 */
  }
  
  .article-meta {
    gap: 0.5rem; /* 适中的间距 */
    margin-bottom: 0.3rem;
    flex-wrap: nowrap; /* 避免换行导致的截断 */
  }
  
  .article-tags {
    gap: 0.4rem; /* 适中的标签间距 */
    flex-wrap: nowrap; /* 避免标签换行 */
  }
  
  .tag {
    padding: 0.15rem 0.4rem; /* 适中的标签内边距 */
    font-size: 0.7rem; /* 适中的标签字号 */
    white-space: nowrap; /* 避免标签内文字换行 */
  }
  
  .article-stats {
    gap: 1rem; /* 适中的统计信息间距 */
    padding-top: 0.3rem;
    margin-top: auto; /* 推到最底部 */
  }
  
  .publish-time {
    font-size: 0.8rem; /* 减小时间字号 */
    white-space: nowrap; /* 避免时间文字换行 */
  }
}
</style>
